<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{../../css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{../../css/admin.css}" media="all">
    <script type="text/javascript" th:src="@{../../js/jquery-3.4.1.js}"></script>
</head>
<body layadmin-themealias="default">
<div class="layui-fluid">
    <div class="layui-card">
        <!-- 表格查询条件表单 -->
        <div class="layui-card-header layui-form">
            <div class="layui-form-item layui-form-pane">
                <div class="layui-inline">
                    <input class="layui-input layui-input-inline LAY-date" type="text" name="beginDate"
                           placeholder="开始日期">
                    <input class="layui-input layui-input-inline LAY-date" type="text" name="endDate"
                           placeholder="结束日期">
                </div>
                <div class="layui-inline">
                    <select name="search-lable-val" placeholder="类别">
                        <option value="">会计类别</option>
                        <option value="1">中级</option>
                        <option value="3">注会CPA</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <select name="search-date-val" placeholder="快捷时间">
                        <option value="">快捷时间</option>
                        <option value="1">下周</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-radius" lay-submit lay-event="search">
                        <i class="layui-icon">&#xe615;查询</i>
                    </button>
                    <button type="reset" class="layui-btn layui-btn-radius">
                        <i class="layui-icon">&#xe669;重置</i>
                    </button>
                </div>

            </div>
        </div>
        <div class="layui-card-body">
            <!-- 表格工具条 -->
            <div style="padding-bottom: 10px;">
                <button type="button" class="layui-btn layui-btn-radius" lay-event="add">
                    <i class="layui-icon">&#xe654;添加</i>
                </button>
            </div>
            <!-- 表格内容 -->
            <table id="LAY-user-table" class="layui-table" lay-filter="LAY-user-table"></table>
            <!-- 行工具按钮组 -->
            <div class="layui-btn-group layui-hide LAY-user-tool-bar">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-event="detail">编辑</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" lay-event="delete">删除</button>
            </div>
        </div>
    </div>
</div>

<div id="LAY-form" class="layui-hide"></div>
<script type="text/javascript" th:src="@{../../layui.all.js}"></script>
<script type="text/javascript" th:src="@{../../js/layinit.js}"></script>
<!--<script type="text/javascript" th:src="@{../../js/main.js}"></script>-->
<script>
    $(function () {

        $('#LAY-form').load('./user-add.html');

        $.ajaxSetup({contentType: 'application/json', dataType: "json"});

        layui.config({
            base: '../../js/ext/' // 设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
        }).use(['form', 'laydate', 'table', 'util', 'serverurl'], function () {

            /*-----------laydate-----------*/
            /*-----------util-----------*/
            let form = layui.form,
                laydate = layui.laydate,
                table = layui.table,
                util = layui.util,
                auth = layui.auth;

            /*-----------table-----------*/
            let tableIns = table.render({
                elem: '#LAY-user-table',
                url: auth.user.list,
                autoSort: false,
                cols: [     [
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'statusDesc', title: '用户状态', sort: true},
                    {field: 'userName', title: '用户名'},
                    {field: 'password', title: '密码', hide: true},
                    {field: 'sexDesc', title: '性别'},
                    {field: 'idCard', title: '身份证号'},
                    {field: 'phone', title: '手机号'},
                    {
                        field: 'createTime', title: '创建时间', sort: true, templet: function (d) {
                            return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")
                        }
                    },
                    {width: 150, align: 'center', title: '操作', toolbar: '.LAY-user-tool-bar'}
                ]]
            });

            table.on('tool(LAY-user-table)', function (obj) {
                let event = obj.event;
                if (event == 'detail') {
                    $.get(auth.user.get + '/' + obj.data.id, function (res) {
                        let data = res.data;
                        form.val('LAY-user-form-div', {
                            id: data.id,
                            userName: data.userName,
                            password: data.password,
                            sex: data.sex,
                            idCard: data.idCard,
                            phone: data.phone
                        });
                    });
                    winIndex = win.open('编辑用户');

                } else if (event == 'delete') {
                    layer.confirm('确认删除吗?', {icon: 2, title:'删除'}, function(index){
                        $.get(auth.user.del + '/' + obj.data.id, function (res) {
                            console.log(res)
                            if (res.code !== 0) {
                                layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                            } else {
                                layer.msg('操作成功', {icon: 6});
                                tableIns.reload();
                                layer.close(index);
                            }
                        });
                    });
                }
            });

            /*-----------form-----------*/
            form.on('submit(LAY-add-submit)', function (data) {
                var actionUrl = '', method = 'POST';
                if (data.field.id) {
                    actionUrl = auth.user.edit;
                } else {
                    actionUrl = auth.user.add;
                }

                data.field.id = 1;
                $.post(actionUrl, JSON.stringify(data.field), function (data, status) {
                    if (data.code !== 0) {
                        layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                    } else {
                        layer.msg('操作成功', {icon: 6});
                        tableIns.reload();
                        win.close(winIndex);
                    }
                }, 'JSON');

                return false;
            });


            let winIndex;
            // 新增
            $('[lay-event="add"]').on('click', function (obj) {
                winIndex = win.open();
            });
            // 关闭
            $('[lay-event="close"]').on('click', function (obj) {
                win.close(winIndex);
            });


            // 弹窗操作
            const win = {
                open: function (str) {
                    return layer.open({
                        type: 1,
                        anim: 5,
                        offset: '150px',
                        title: str ? str : '新增用户',
                        content: $('#LAY-form'),
                        cancel: function () {
                            //禁止点击该按钮关闭
                            // $('#LAY-form').addClass('layui-hide');
                            return true;
                        },
                        success: function (index, layero) {
                            $('[lay-filter="LAY-user-form-div"]')[0].reset();
                            $('#LAY-form').removeClass('layui-hide');
                            form.render();
                            // $('[name="password"]').addClass("layui-disabled");
                            // $('[lay-filter="LAY-user-form-reset"]').addClass("layui-hide");
                        },
                        end: function (index, layero) {
                            $('#LAY-form').addClass('layui-hide');
                        }
                    });
                },
                close: function (index) {
                    layer.close(index);
                }
            };
        });
    });

</script>
</body>

<!-- 用户form 弹窗-->
<!--<div id="LAY-form" class="layui-hide">
    <form class="layui-form layui-form-pane" lay-filter="LAY-user-form-div">
        <input type="text" id="id" name="id" class="layui-hide">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" placeholder="请输入用户名" autocomplete="off" name="userName"
                       lay-verify="required" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" placeholder="请输入密码" autocomplete="off" name="password"
                       lay-verify="required" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="女" checked>
                <input type="radio" name="sex" value="2" title="男">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号：<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" placeholder="请输入身份证号" autocomplete="off" name="idCard"
                       lay-verify="identity" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" placeholder="请输入手机号" autocomplete="off" name="phone"
                       lay-verify="phone" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="LAY-add-submit">立即提交</button>
                <button type="reset" class="layui-btn" lay-filter="LAY-user-form-reset">重置</button>
                <button type="button" class="layui-btn" lay-event="close">关闭</button>
            </div>
        </div>
    </form>
</div>-->
</html>